<template>
<div :title="$t('plus.create_live_room')" v-loading="loading">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item :label="$t('plus.live_room_name')" prop="name">
        <el-input v-model="ruleForm.name" class="max-w460"></el-input>
      </el-form-item>

      <el-form-item :label="$t('plus.live_cover_image')" prop="coverImgId">
        <div>
          <el-button type="primary" @click="openUpload('cover')"
            >{{$t('plus.upload_image_button')}}</el-button
          >
          <img
            :src="coverImgPath"
            class="mt10"
            width="120"
            v-if="ruleForm.coverImgId != ''"
          />
          <div class="gray9">{{$t('plus.cover_image_tip_1080')}}</div>
          <!--上传图片组件-->
          <Upload
            v-if="isupload"
            :isupload="isupload"
            @returnImgs="returnImgsFunc"
            >{{$t('plus.upload_image_button')}}</Upload
          >
        </div>
      </el-form-item>

      <el-form-item :label="$t('plus.live_time')">
        <el-row>
          <el-date-picker
            v-model="ruleForm.startTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :placeholder="$t('plus.select_start_time')"
          >
          </el-date-picker>
          <el-date-picker
            class="ml20"
            v-model="ruleForm.endTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :placeholder="$t('plus.select_end_time')"
          >
          </el-date-picker>
        </el-row>
      </el-form-item>

      <el-form-item :label="$t('plus.host_nickname')" prop="anchorName">
        <el-input v-model="ruleForm.anchorName" class="max-w460"></el-input>
      </el-form-item>

      <el-form-item :label="$t('plus.host_wechat')" prop="anchorWechat">
        <el-input v-model="ruleForm.anchorWechat" class="max-w460"></el-input>
      </el-form-item>

      <el-form-item :label="$t('plus.live_share_image')" prop="shareImgId">
        <div>
          <el-button type="primary" @click="openUpload('share')"
            >{{$t('plus.upload_image_button')}}</el-button
          >
          <img
            :src="shareImgPath"
            class="mt10"
            width="120"
            v-if="ruleForm.shareImgId != ''"
          />
          <div class="gray9">{{$t('plus.share_image_tip_800x640')}}</div>
          <!--上传图片组件-->
          <Upload
            v-if="isupload"
            :isupload="isupload"
            @returnImgs="returnImgsFunc"
            >{{$t('plus.upload_image_button')}}</Upload
          >
        </div>
      </el-form-item>
      <el-form-item :label="$t('plus.channel_cover_image')" prop="feedsImgId">
        <div>
          <el-button type="primary" @click="openUpload('feeds')"
            >{{$t('plus.upload_image_button')}}</el-button
          >
          <img
            :src="feedsImgPath"
            class="mt10"
            width="120"
            v-if="ruleForm.feedsImgId != ''"
          />
          <div class="gray9">{{$t('plus.channel_cover_tip_800x800')}}</div>
          <!--上传图片组件-->
          <Upload
            v-if="isupload"
            :isupload="isupload"
            @returnImgs="returnImgsFunc"
            >{{$t('plus.upload_image_button')}}</Upload
          >
        </div>
      </el-form-item>
      <el-form-item :label="$t('plus.stream_type')" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio :label="0">{{$t('plus.mobile_streaming')}}</el-radio>
          <el-radio :label="1">{{$t('plus.push_stream')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('plus.enable_likes')" prop="closeLike">
        <el-radio-group v-model="ruleForm.closeLike">
          <el-radio :label="0">{{$t('plus.enable')}}</el-radio>
          <el-radio :label="1">{{$t('plus.disable')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('plus.enable_shelf')" prop="closeGoods">
        <el-radio-group v-model="ruleForm.closeGoods">
          <el-radio :label="0">{{$t('plus.enable')}}</el-radio>
          <el-radio :label="1">{{$t('plus.disable')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('plus.enable_comments')" prop="closeComment">
        <el-radio-group v-model="ruleForm.closeComment">
          <el-radio :label="0">{{$t('plus.enable')}}</el-radio>
          <el-radio :label="1">{{$t('plus.disable')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('plus.review_passed')" prop="auditStatus">
        <el-radio-group v-model="ruleForm.auditStatus">
          <el-radio :label="10">{{$t('plus.approved_status')}}</el-radio>
          <el-radio :label="20">{{$t('plus.review_failed')}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div>
      <el-button @click="resetForm('ruleForm')">{{$t('plus.reset')}}</el-button>
      <el-button @click="cancelFunc()">{{$t('plus.cancel')}}</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
        :loading="loading"
        >{{$t('plus.submit')}}</el-button
      >
    </div>
  </div>
</template>

<script>
import LiveApi from "@/api/live.js";
import Upload from "@/components/file/Upload.vue";
export default {
  components: {
    /*图片上传*/
    Upload: Upload
  },
  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      isImg: false,
      type: "",
      liveId: "",
      coverImgPath: "",
      shareImgPath: "",
      feedsImgPath: "",
      ruleForm: {
        name: "",
        coverImgId: 0,
        startTime: "",
        endTime: "",
        anchorName: "",
        anchorWechat: "",
        shareImgId: "",
        feedsImgId: "",
        type: "",
        closeLike: "",
        closeGoods: "",
        closeComment: "",
        auditStatus: 10
      },
      rules: {
        name: [{
          required: true,
          message: $t("plus.input_room_name"),
          trigger: "blur"
        }, {
          min: 3,
          max: 17,
          message: $t("plus.length_3_17_chars"),
          trigger: "blur"
        }],
        anchorName: [{
          required: true,
          message: $t("plus.input_host_nickname"),
          trigger: "blur"
        }, {
          min: 3,
          max: 15,
          message: $t("plus.nickname_length_3_15"),
          trigger: "blur"
        }],
        anchorWechat: [{
          required: true,
          message: $t("plus.input_host_wechat"),
          trigger: "blur"
        }],
        coverImgId: [{
          required: true,
          message: $t("plus.select_cover_image"),
          trigger: "change"
        }],
        shareImgId: [{
          required: true,
          message: $t("plus.select_share_image"),
          trigger: "change"
        }],
        feedsImgId: [{
          required: true,
          message: $t("plus.select_channel_cover"),
          trigger: "change"
        }],
        startTime: [{
          required: true,
          message: $t("plus.select_start_time2"),
          trigger: "change"
        }],
        endTime: [{
          required: true,
          message: $t("plus.select_end_time2"),
          trigger: "change"
        }],
        type: [{
          required: true,
          message: $t("plus.select_stream_type"),
          trigger: "change"
        }],
        closeLike: [{
          required: true,
          message: $t("plus.select_like_option"),
          trigger: "change"
        }],
        closeGoods: [{
          required: true,
          message: $t("plus.select_shelf_option"),
          trigger: "change"
        }],
        closeComment: [{
          required: true,
          message: $t("plus.select_comment_option"),
          trigger: "change"
        }],
        auditStatus: [{
          required: true,
          message: $t("plus.select_review_passed"),
          trigger: "change"
        }]
      },
      /*左边长度*/
      formLabelWidth: "120px",
      loading: false
    };
  },
  watch: {
    open: function (n, o) {
      if (n != o) {
        this.dialogVisible = n;
      }
    }
  },
  // props: ['liveId', 'categorys'],
  created() {
    this.liveId = this.$route.query.liveId;
    this.getData();
  },
  methods: {
    getData: function () {
      let self = this;
      LiveApi.toAuditWxRoom({
        liveId: self.liveId
      }).then(res => {
        self.loading = false;
        this.ruleForm = res.data;
        this.coverImgPath = res.data.coverImg;
        this.shareImgPath = res.data.shareImg;
        this.feedsImgPath = res.data.feedsImgPath;
      }).catch(error => {
        self.loading = false;
      });
    },
    submitForm(formName) {
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let param = self.ruleForm;
          LiveApi.auditWxRoom(param).then(data => {
            ElMessage({
              message: $t("plus.review_success"),
              type: "success"
            });
            this.$router.back(-1);
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    },
    /*上传图片*/
    uploadFile(fileId) {
      let self = this;
      const loading = ElLoading.service({
        lock: true,
        text: $t("plus.file_uploading"),
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      LiveApi.uploadFile({
        fileId
      }, err => {
        loading.close();
      }).then(response => {
        loading.close();
        ElMessage({
          message: $t("plus.upload_success_wechat"),
          type: "success"
        });
      }).catch(response => {
        loading.close();
      });
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == "cover") {
          this.coverImgPath = e[0].filePath;
          this.ruleForm.coverImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        } else if (this.type == "share") {
          this.shareImgPath = e[0].filePath;
          this.ruleForm.shareImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.shareImgId);
        } else if (this.type == "feeds") {
          this.feedsImgPath = e[0].filePath;
          this.ruleForm.feedsImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        }
      } else {}
      this.isupload = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.img {
  margin-top: 10px;
}
</style>

